<template>
  <div class="trade">
    <el-table
      :data="tableData"
      style="width: 100%; max-width: 100vw"
      @row-click="handleRowClick"
      :scrollbar-always-on="true"
    >
      <el-table-column
        prop="blockHash"
        label="区块哈希值"
        min-width="180"
        show-overflow-tooltip
      />
      <el-table-column prop="blockNumber" label="区块号" min-width="80" />
      <el-table-column
        prop="from"
        label="交易发送方地址"
        min-width="180"
        show-overflow-tooltip
      />
      <el-table-column prop="gas" label="分配的Gas量" min-width="120" />
      <el-table-column
        prop="hash"
        label="交易哈希值"
        min-width="180"
        show-overflow-tooltip
      />
      <el-table-column
        prop="input"
        label="交易输入数据"
        min-width="180"
        show-overflow-tooltip
      />
      <el-table-column
        prop="nonce"
        label="交易随机数"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        prop="to"
        label="交易接收方地址"
        min-width="180"
        show-overflow-tooltip
      />
      <el-table-column
        prop="transactionIndex"
        label="交易在区块中的索引"
        min-width="120"
      />
      <el-table-column prop="value" label="交易金额" min-width="120" />
      <el-table-column prop="gasPrice" label="Gas单价" min-width="120" />
      <el-table-column prop="blockLimit" label="区块高度限制" min-width="120" />
      <el-table-column prop="chainId" label="链ID" min-width="80" />
      <el-table-column prop="groupId" label="群组ID" min-width="80" />
      <el-table-column
        prop="extraData"
        label="额外数据"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        prop="signature"
        label="签名对象"
        :formatter="signatureFormatter"
        min-width="180"
        show-overflow-tooltip
      />
    </el-table>

    <el-dialog
      v-model="dialogVisible"
      title="交易详情"
      width="800px"
      :style="{ maxWidth: '90vw' }"
      class="trade-detail-dialog"
    >
      <div class="trade-detail-content">
        <el-form :model="currentRow" label-width="140px">
          <el-form-item label="区块哈希值">
            <el-input
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 4 }"
              :model-value="currentRow.blockHash"
              readonly
            />
          </el-form-item>
          <el-form-item label="区块号">
            <el-input
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 2 }"
              :model-value="currentRow.blockNumber"
              readonly
            />
          </el-form-item>
          <el-form-item label="交易发送方地址">
            <el-input
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 4 }"
              :model-value="currentRow.from"
              readonly
            />
          </el-form-item>
          <el-form-item label="分配的Gas量">
            <el-input
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 2 }"
              :model-value="currentRow.gas"
              readonly
            />
          </el-form-item>
          <el-form-item label="交易哈希值">
            <el-input
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 4 }"
              :model-value="currentRow.hash"
              readonly
            />
          </el-form-item>
          <el-form-item label="交易输入数据">
            <el-input
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 6 }"
              :model-value="currentRow.input"
              readonly
            />
          </el-form-item>
          <el-form-item label="交易随机数">
            <el-input
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 2 }"
              :model-value="currentRow.nonce"
              readonly
            />
          </el-form-item>
          <el-form-item label="交易接收方地址">
            <el-input
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 4 }"
              :model-value="currentRow.to"
              readonly
            />
          </el-form-item>
          <el-form-item label="交易在区块中的索引">
            <el-input
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 2 }"
              :model-value="currentRow.transactionIndex"
              readonly
            />
          </el-form-item>
          <el-form-item label="交易金额">
            <el-input
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 2 }"
              :model-value="currentRow.value"
              readonly
            />
          </el-form-item>
          <el-form-item label="Gas单价">
            <el-input
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 2 }"
              :model-value="currentRow.gasPrice"
              readonly
            />
          </el-form-item>
          <el-form-item label="区块高度限制">
            <el-input
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 2 }"
              :model-value="currentRow.blockLimit"
              readonly
            />
          </el-form-item>
          <el-form-item label="链ID">
            <el-input
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 2 }"
              :model-value="currentRow.chainId"
              readonly
            />
          </el-form-item>
          <el-form-item label="群组ID">
            <el-input
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 2 }"
              :model-value="currentRow.groupId"
              readonly
            />
          </el-form-item>
          <el-form-item label="额外数据">
            <el-input
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 4 }"
              :model-value="currentRow.extraData"
              readonly
            />
          </el-form-item>
          <el-form-item label="签名对象">
            <el-input
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 6 }"
              :model-value="signatureFormatter(currentRow)"
              readonly
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang='ts'>
import { ref, onMounted } from "vue";
import { addTr } from "../../api/trade";
import { Trade } from "../../types/trade";
//存储交易回执信息
const tableData = ref<any[]>([]);
// 弹窗显示控制
const dialogVisible = ref(false);
// 当前行数据
const currentRow = ref<any>({});
// 签名对象格式化
const signatureFormatter = (row: any) => {
  if (typeof row.signature === "object") {
    return JSON.stringify(row.signature);
  }
  return row.signature;
};
//获取交易回执信息
const getTrade = async () => {
  const res = await addTr(1, 10);
  tableData.value = res.data;
  console.log(tableData.value);
};
// 行点击事件
const handleRowClick = (row: any) => {
  currentRow.value = { ...row };
  dialogVisible.value = true;
};
onMounted(() => {
  getTrade();
});
</script>
<style scoped lang='scss'>
.trade-detail-dialog .el-dialog__body {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 16px;
}
.trade-detail-content .el-form-item__content {
  word-break: break-all;
  white-space: pre-wrap;
}
.trade-detail-content .el-form-item {
  margin-bottom: 10px;
}
</style>
